<template>
  <!-- 商品展示 -->
  <!-- 选项名和keyword都是中文有点low，但是先这样吧 -->
  <div>
    <Title title="商品展示"> </Title>
    <div class="top">
      <el-tabs v-model="query.activeName">
        <el-tab-pane
          v-for="(l, i) in allTypes"
          :label="l"
          :name="l"
          :key="i"
        ></el-tab-pane>
      </el-tabs>
      <el-dropdown @command="handleCommand">
        <!-- 选择下拉菜单 -->
        <span class="uname">
          <h2>
            {{ query.price }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </h2>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="默认排序">默认排序</el-dropdown-item>
            <el-dropdown-item command="价格升序">价格升序</el-dropdown-item>
            <el-dropdown-item command="价格降序">价格降序</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button
        type="danger"
        size="large"
        round
        color="red"
        @click="router.push({ name: 'shop-cart' })"
        >前往购物车</el-button
      >
    </div>
    <div class="mainbox">
      <GoodList
        :list="list.length > 0 ? list : goodsList"
        @addtocart="addtocart"
        @buynow="buynow"
      ></GoodList>
    </div>
  </div>
</template>
<!-- 加入购物车要查询list当前账户当前商品在购物车中有没有。有就修改数量加一update，没有就新增一条数据add -->
<script lang="ts" setup>
import { ref, reactive, onMounted, computed, watch } from "vue";
import { Ajax } from "@/api";
import GoodList from "./GoodList.vue";
import { useRouter } from "vue-router";
import { ArrowDown } from "@element-plus/icons-vue";
const router = useRouter();
const goodsList: any = ref([]);
const list: any = ref([]);
const query = ref({
  activeName: "全部商品",
  price: "默认排序",
});
// const activeName = ref("全部商品");
const getGoods = async () => {
  let res = await Ajax.goodslist();
  goodsList.value = res.result;
};
const handleCommand = (v: any) => {
  console.log(v);
  query.value = { ...query.value, price: v }; //深拷贝
  // command是command属性对应的值
};
const price = ref("default");
const allTypes = computed(() => {
  //去重得到所有商品类型
  var arr = ["全部商品"];
  var obj = {};
  goodsList.value.forEach((item) => {
    if (!obj[item.type.text]) {
      obj[item.type.text] = item.type.text;
      arr.push(item.type.text);
    }
  });
  return arr;
});
// const sortAsc = (a: any, b: any) => {
//   //升
//   // return a.price - b.price;
//   return a["price"] - b["price"];
// };
// const sortDesc = (a: any, b: any) => {
//   // 降序
//   // return b.price - a.price;
//   return b["price"] - a["price"];
// };
watch(
  query,
  (v) => {
    if (v.price == "默认排序") {
      if (v.activeName == "全部商品") {
        list.value = [...goodsList.value];
      } else {
        list.value = [...goodsList.value].filter(
          (item) => item.type.text == v.activeName
        );
      }
    } else if (v.price == "价格升序") {
      if (v.activeName == "全部商品") {
        list.value = [...goodsList.value].sort((a, b) => {
          return a.price - b.price;
        });
      } else {
        list.value = [...goodsList.value]
          .filter((item) => item.type.text == v.activeName)
          .sort((a, b) => {
            return a.price - b.price;
          });
      }
    } else if (v.price == "价格降序") {
      if (v.activeName == "全部商品") {
        list.value = [...goodsList.value].sort((a, b) => {
          return b.price - a.price;
        });
      } else {
        list.value = [...goodsList.value]
          .filter((item) => item.type.text == v.activeName)
          .sort((a, b) => {
            return b.price - a.price;
          });
      }
    }
  },
  { immediate: true, deep: true }
);

const addtocart = async (v: any) => {
  let res = await Ajax.cartlist({ id: v.id });
  // 所有类型的商品
  const result = res.result;
  if (result.length > 0) {
    //购物车有这个商品，修改cart，数量加一
    let res2 = await Ajax.cartupdate({
      value: result[0].value + 1,
      id: result[0]._id,
    });
    console.log("数量加一");
  } else {
    //购物车没这个商品，cart新增，add
    let res3 = await Ajax.cartadd({ value: 1, good: v });
  }
};
const buynow = (v: any) => {
  addtocart(v);
  router.push({ name: "shop-cart" });
};

onMounted(() => {
  getGoods();
});
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  // align-items: center;
  // justify-content: space-between;
  .el-tabs {
    margin-right: 100px;
  }
  .el-dropdown {
    margin-right: 300px;
  }
}
.mainbox {
  width: 100%;
}
</style>
